/**
 * @date: 2024-07-16 15:10:32
 * @description: 获取react 实例
 * useEffect: react一个钩子函数(生命周期)在函数组件中执行副作用操作。副作用是指那些不属于组件渲染逻辑的操作，比如数据获取、订阅或手动更改 DOM。,
 * useState: 允许你在组件内部声明一个可变的变量（称为“状态”），并且随着组件的渲染，这个状态可以更新
 * @modifyContent:
 * @author: Forever丿顾北
**/
import React, { useEffect, useState } from "react";
import { Col, Row, Card } from 'antd';
import HomeUserShow from './components/HomeUserShow'
import HomenTabTableShow from './components/HomenTabTableShow'
import HomenTopStatistics from './components/HomeTopStatistics'
import HomenEcartsShow from './components/HomenEcartsShow'
import {
  Get_Data_Api // 获取数据API
} from '@Api/HomeApi'
import './index.scss';

// 创建组件,使用hooks
const HomeIndex =  () => {
  /**
   * @date: 2024-07-16 17:27:19
   * @description: 定义页面数据
   * @modifyContent: 
   * const { 数据源, 获取数据方法} = useState(默认值)
   * @author: Forever丿顾北
  **/
  const [tableData, setTableData] = useState([]) // 首页表格数据
  const [countData, setCountData] = useState([]) // 首页统计数据
  const [lineEcartsData, setlineEcartsData] = useState({}) // 首页统计数据(折现图)
  /**
   * @date: 2024-07-16 17:00:08
   * @description: useEffect可以接受两个参数：一个函数和一个可选的依赖数组。该函数会在组件挂载后执行（首次渲染前），并在每次依赖数组中的值发生变化时重新执行。这使得它非常适合处理那些需要在组件生命周期的不同阶段进行的副作用操作。
   * @modifyContent:
   * @author: Forever丿顾北
  **/
  useEffect(() =>{
    /**
     * @date: 2024-07-19 16:48:08
     * @description:获取数据
     * @author: Forever丿顾北
    **/
    Get_Data_Api().then(({data}) => {
      if (data.code === 200) {
        /**
         * @date: 2024-07-19 16:48:08
         * @description:结构对应参数
         * @author: Forever丿顾北
         * @returns{ * }: ${tableData 表格数据}
         * @returns{ * }: ${countData 统计数据}
         * @returns{ * }: ${orderData 订单数据（折线图数据）}
         * @returns{ * }: ${userData 用户数据（柱形图数据）}
         * @returns{ * }: ${videoData 饼图数据}
        **/
        const {tableData, countData, orderData, userData, videoData} = data.data
        // 对于echarts数据的处理
        const order = orderData // 折现图数据
        // x轴的数据
        const xData = order.date
        // series的数据
        const keyArray = Object.keys(order.data[0])
        const series = []
        keyArray.forEach(key => {
          series.push({
            name: key,
            type: 'line',
            data: order.data.map(item => item[key])
          })
        })
        setlineEcartsData({
          order: {
            xData: xData,
            series: series
          },
          user: {
            xData: userData.map(item => item.date),
            series: [{
              name: '新增用户',
              type: 'bar',
              data: userData.map(item => item.new)
            }, {
              name: '活跃用户',
              type: 'bar',
              data: userData.map(item => item.active)
            }]
          },
          video: {
            series: [{
              data: videoData,
              type: 'pie',
            }]
          }
        })
        setTableData(tableData.map((item,index) =>({...item, id:index}))) // 首页表格数据
        setCountData(countData) // 首页统计数据
      }
    });
  }, [setTableData, setCountData, setlineEcartsData])  // 空数组表示这个effect只在组件挂载时运行一次
  return (
    <div id="HomeIndex">
      <Row gutter={10}>
        <Col span={8}>
          <HomeUserShow />
          <HomenTabTableShow tableData={tableData}/>
        </Col>
        <Col span={16}>
          <HomenTopStatistics countData={countData}/>
          <Card hoverable className="homen_ecarts_show">
            { lineEcartsData.order && <HomenEcartsShow chartData={lineEcartsData.order} style={{height:'32vh', width:'100%'}}/>}
            <div className="greaph_box margin_top">
              { lineEcartsData.user && <HomenEcartsShow chartData={lineEcartsData.user} style={{height:'32vh', width:'50%'}}/>}
              { lineEcartsData.video && <HomenEcartsShow chartData={lineEcartsData.video} isAxiscChart={false} style={{height:'32vh', width:'50%'}}/>}
            </div>
          </Card>
        </Col>
      </Row>
    </div>
  );
}

export default HomeIndex;